<template>
	<div
		class="tables"
		ref="wrapper"
	>
		<div
			v-if="showBtn"
			class="btn"
			@click="$emit('btnClick')"
		>
			<img
				width="26"
				height="26"
				src="@/static/img/full-screen.png"
			/>
		</div>
		<!-- 切换选项卡 -->
		<el-tabs v-model="activeName">
			<el-tab-pane
				v-for="(item,index) in list"
				:key="index"
				:label="item.keywords"
				:name="index+''"
			>
			</el-tab-pane>
		</el-tabs>
		<el-row
			class="describe"
			v-if="obj"
		>
			<el-col
				:span="8"
				class="p"
			><span class="label-title">传感器类型：</span>{{obj.type}}</el-col>
			<el-col
				:span="8"
				class="p"
			><span class="label-title">监测内容：</span>{{obj.content}}</el-col>
			<el-col
				:span="8"
				class="p"
			><span class="label-title">工作状态：</span>{{obj.status}}</el-col>
			<el-col
				:span="8"
				class="p"
			><span class="label-title">传感器编号：</span>{{obj.number}}</el-col>
			<el-col
				:span="16"
				class="p"
			><span class="label-title">位置：</span>{{obj.site}}</el-col>
		</el-row>

		<el-table
			v-if="obj&&obj.grid&&height&&obj.type=='GNSS'"
			:data="obj.grid"
			size="small"
			:height="height"
		>
			<el-table-column
				prop="time"
				label="时间"
				min-width="140"
			></el-table-column>
			<el-table-column
				prop="X偏移"
				min-width="60"
				label="X偏移"
			></el-table-column>
			<el-table-column
				prop="Y偏移"
				min-width="60"
				label="Y偏移"
			></el-table-column>
			<el-table-column
				prop="H偏移"
				min-width="60"
				label="H偏移"
			></el-table-column>
		</el-table>

    <!-- 测斜仪表格 -->
    <el-table
      v-if="obj&&obj.grid&&height&&obj.type=='测斜仪'"
      :data="obj.grid"
      size="small"
      :height="height"
    >
      <el-table-column
        prop="time"
        label="时间"
        min-width="140"
      ></el-table-column>
      <el-table-column
        prop="X偏移"
        min-width="60"
        label="X偏移"
      ></el-table-column>
      <el-table-column
        prop="Y偏移"
        min-width="60"
        label="Y偏移"
      ></el-table-column>
    </el-table>

    <!-- 雨量计表格 -->
    <el-table
      v-if="obj&&obj.grid&&height&&obj.type=='雨量计'"
      :data="obj.grid"
      size="small"
      :height="height"
    >
      <el-table-column
        prop="time"
        label="时间"
        min-width="140"
      ></el-table-column>
      <el-table-column
        prop="降雨量"
        min-width="60"
        label="降雨量"
      ></el-table-column>
    </el-table>

	</div>
</template>

<script>
	export default {
		name: "tables",
		components: {},
		props: {
			list: {
				type: Array,
				default: () => []
			},
			showBtn: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
			  obj:undefined,
        activeName:'0',
				height: 0
			};
		},
		watch: {
		  list(){
		    this.initData();
      },
      activeName(){
		    this.initData();
      }
    },
		computed: {
		},
		methods: {
      initData(){
        if(this.list[this.activeName]!=null){
          var temp = JSON.stringify(this.list[this.activeName]);
          this.obj = JSON.parse(temp);
          if(this.obj ) {
            var arr = [];
            var grid = this.obj.grid;
            if (grid.length > 0 && grid[0].hasOwnProperty('H偏移')) {
              for (var i = 0; i < grid.length; i++) {
                if (this.checkRate(grid[i]['X偏移']) || this.checkRate(grid[i]['Y偏移']) || this.checkRate(grid[i]['H偏移'])) {
                  arr.push(grid[i]);
                }
              }
            }
            else if (grid.length > 0 && grid[0].hasOwnProperty('降雨量')) {
              for (var i = 0; i < grid.length; i++) {
                if (this.checkRate(grid[i]['降雨量'])) {
                  arr.push(grid[i]);
                }
              }
            }
            else {
              for (var i = 0; i < grid.length; i++) {
                if (this.checkRate(grid[i]['X偏移']) || this.checkRate(grid[i]['Y偏移'])) {
                  arr.push(grid[i]);
                }
              }
            }
            this.obj.grid = arr;
          }
        }
      },
			setTableHeight() {
				this.height = this.$refs.wrapper.offsetHeight - 98;
				console.log(this.height);
			},
      checkRate(val) {
        var regPos = /^\d+(\.\d+)?$/; //非负浮点数
        var regNeg = /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/; //负浮点数
        if(regPos.test(val) || regNeg.test(val)) {
          return true;
        } else {
          return false;
        }
      }
		},
		created() {},
		mounted() {
			this.setTableHeight();
			this.initData();
		}
	};
</script>
<style lang="scss" scoped>
	@import "~@/assets/styles/mixin.scss";
	@import "~@/assets/styles/variables.scss";
	.tables {
		background-color: #fff;
		padding: 0 16px 16px;
		position: relative;
		.btn {
			position: absolute;
			z-index: 99;
			right: 4px;
			top: 50px;
			cursor: pointer;
			background-color: rgba(0, 0, 0, 0.25);
			font-size: 0;
		}
	}
	.describe {
		font-size: 12px;
		line-height: 20px;
		color: #666666;
		.p {
			@include ellipsis;
		}
		.label-title {
			color: #999999;
		}
	}
  .el-table--fit{
    height: 400px;
  }
</style>
